<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能家居控制中心</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <h1>智能家居控制中心</h1>
        <div class="devices-grid">
            <!-- 客厅灯 -->
            <div class="device-card">
                <div class="device-icon">
                    <i class="fas fa-lightbulb"></i>
                </div>
                <h3>客厅灯</h3>
                <div class="device-controls">
                    <button class="btn on" onclick="controlDevice('living_room_light', 'on')">开启</button>
                    <button class="btn off" onclick="controlDevice('living_room_light', 'off')">关闭</button>
                </div>
            </div>

            <!-- 二楼灯 -->
            <div class="device-card">
                <div class="device-icon">
                    <i class="fas fa-lightbulb"></i>
                </div>
                <h3>二楼灯</h3>
                <div class="device-controls">
                    <button class="btn on" onclick="controlDevice('second_floor_light', 'on')">开启</button>
                    <button class="btn off" onclick="controlDevice('second_floor_light', 'off')">关闭</button>
                </div>
            </div>

            <!-- 风扇 -->
            <div class="device-card">
                <div class="device-icon">
                    <i class="fas fa-fan"></i>
                </div>
                <h3>风扇</h3>
                <div class="device-controls">
                    <button class="btn on" onclick="controlDevice('fan', 'on')">开启</button>
                    <button class="btn off" onclick="controlDevice('fan', 'off')">关闭</button>
                </div>
            </div>

            <!-- 人脸识别 -->
            <div class="device-card">
                <div class="device-icon">
                    <i class="fas fa-user-check"></i>
                </div>
                <h3>人脸识别</h3>
                <div class="device-controls">
                    <button class="btn on" onclick="controlDevice('face_recognition', 'on')">启用</button>
                    <button class="btn off" onclick="controlDevice('face_recognition', 'off')">停用</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function controlDevice(device, action) {
            const buttons = document.querySelectorAll(`button[onclick*="${device}"]`);
            buttons.forEach(btn => btn.disabled = true);

            fetch('/control', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    device: device,
                    action: action
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    console.log('控制指令发送成功！');
                } else {
                    alert('操作失败，请重试！');
                }
            })
            .finally(() => {
                buttons.forEach(btn => btn.disabled = false);
            });
        }
    </script>
</body>
</html>